<template>
    <el-dialog :modelValue="LogmxVisible" :title="props.info == undefined ? '新增' : '上传明细'" width="80%"
        :before-close="handleClose">

        <el-card>
            <el-form >
            <el-form-item label="数据库语句：" prop="jobId">
                <span class="bordered-text">{{ form1.proctext }}</span>
            </el-form-item>
    </el-form>
        </el-card>
        <el-card class="box-card">
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef">
                <el-table-column type="selection" width="55" />
                <el-table-column label="表名" width="70">
                    <template #default="scope">
                        <div>{{ scope.row.params }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="主键">
                    <template #default="scope">
                        <div>{{ scope.row.pkname }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template #default="scope">
                        <div :class="{
                            'success-text': scope.row.status == 0,
                            'error-text': scope.row.status != 0
                        }">{{ scope.row.status == 0 ? "成功" : "报错" }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="时间">
                    <template #default="scope">
                        <div>{{ scope.row.time }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="right" width="200">
                    <template #default="scope">
                        <!-- <el-button size="small" type="success" @click="handleQuery(scope.$index, scope.row)">详情</el-button> -->
                        <el-button size="small" type="primary"
                            @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
                        <!-- <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                        <!-- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                        <!-- <template v-if="scope.row.jobStatus===0"><el-button size="small" type="success" >启动</el-button></template>
        <template v-if="scope.row.jobStatus===1"><el-button size="small" type="warning" >停止</el-button></template> -->
                        <!-- <el-button size="small" type="warning" @click="once(scope.$index, scope.row)">单次执行</el-button> -->

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="form2.pageIndex" v-model:page-size="form2.pageSize"
                :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="form2.Total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-card>
    </el-dialog>
    <el-dialog v-model="mxabled"
    title="详情SQL&日志"
    width="70%"
    :before-close="mxCloseEdit" >
    <el-form >
            <el-form-item label="SQL语句：" prop="jobId">
                <span class="bordered-text">{{ form3.sql }}</span>
            </el-form-item>
            <el-form-item label="日志内容：" prop="jobId">
                <span class="bordered-text">{{ form3.log==""?"没有报错日志":form3.log }}</span>
            </el-form-item>
    </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, computed, defineEmits, onMounted, watch, onBeforeMount } from 'vue'
import { updateJob, addJob, GetDblist, getLogmx } from '../../../../http';
import { LogModel } from '../class/LogModel';
import { LogmxModel } from '../class/LogmxModel';
import { ElMessage } from "element-plus";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { info } from 'sass';
import { number } from 'echarts';
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const mxabled = ref(false)
const ruleFormRef = ref<FormInstance>()
const props = defineProps({
    LogmxVisible: Boolean,
    info: LogModel,
})
const tableData = ref<Array<LogmxModel>>()
const value = ref(1)
const form1 = ref({
    params: props.info?.params,
    kssj: "",
    jssj: "",
    time: "",
    cont: "",
    succ: "",
    err: "",
    upd: "",
    isonce: "",
    uuid: props.info?.uuid,
    proctext: "",
})
const form2 = ref({
    params: "",
    pkname: "",
    status: "",
    sql: "",
    log: "",
    time: "",
    uuid: "",
    pageIndex: 1,
    pageSize: 10,
    Total: 0
})
const form3 = reactive({
    sql:"",
    log:""
})
//接口方式
const beanName = [
    { beanName: "insert" }, { beanName: "api" }
]

const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
})
// onMounted(async () => {
//     let res = GetDblist()
//     console.log(res);

// })

//#region 组件挂之前，初始化数据
interface ListItem1 {
    name: string;
    type: string;
    dbname: string;
    url: string;
    username: string;
    password: string;
}
//数据库连接列表
const dblist = ref<ListItem1[]>([]);
onBeforeMount(async () => {
    let ref1 = await GetDblist();
    // console.log(ref1.data);
    dblist.value = ref1.data;
    // console.log(dblist.value);
});
//#endregion


const LoadTableData = async (name: string = "") => {

    let res = await getLogmx(form2.value.pageIndex, form2.value.pageSize, form1.value.params, form1.value.uuid) as any
    console.log(res.data);

    form2.value.Total = res.data.total;
    console.log("总行数" + form2.value.Total);


    tableData.value = res.data.records as LogmxModel[]
    console.log(tableData)
}

//监听
watch(
    () => props.info,
    async (newInfo, oldInfo) => {

        if (newInfo != null) {
            let currInfo: LogModel = (JSON.parse(newInfo as any)) as LogModel
            form1.value = {
                params: currInfo.params,
                kssj: currInfo.kssj,
                jssj: currInfo.jssj,
                time: currInfo.time,
                cont: currInfo.cont,
                succ: currInfo.succ,
                err: currInfo.err,
                upd: currInfo.upd,
                isonce: currInfo.isonce,
                uuid: currInfo.uuid,
                proctext: currInfo.proctext,
            }
            //         let res = await GetDblist() as any
            LoadTableData();
            console.log(form1.value);

        } else {
            form1.value = {
                params: "",
                kssj: "",
                jssj: "",
                time: "",
                cont: "",
                succ: "",
                err: "",
                upd: "",
                isonce: "",
                uuid: "",
                proctext: "",
            };
            form2.value={
                params: "",
                pkname: "",
                status: "",
                sql: "",
                log: "",
                time: "",
                uuid: "",
                pageIndex: 1,
                pageSize: 10,
                Total: 0
            }
            //         let res = await GetDblist() as any
            // console.log(res);
        }
    }
);
//defineEmits用于定义回调事件，里面是数组，可以定义多个事件
const emits = defineEmits(["CloseAdd"])
const handleClose = (done: () => void) => {
    emits("CloseAdd")
}



const close = (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    ruleFormRef.resetFields()
    emits("CloseAdd")
}

const handleEdit = (index: number, row: LogmxModel) => {
    // info.value = JSON.stringify(row)
    form3.sql=row.sql
    form3.log=row.log
    mxabled.value = true
}
const mxCloseEdit = () => {
    // info.value = JSON.stringify(row)
    mxabled.value = false
}

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    form2.value.pageIndex=val;
    
    LoadTableData();
}

</script>
<style lang="scss" scoped>
.form {
    min-height: 800px;

    .btn {
        position: absolute;
        bottom: 10px;

    }
}

.success-text {
  color: green;
}

.error-text {
  color: red;
}
.bordered-text {
    display: inline-block; /* 使边框不占满整行 */
    padding: 4px 8px;      /* 增加内边距改善视觉效果 */
    border: 1px solid #dcdfe6; /* Element UI 默认边框色 */
    border-radius: 4px;    /* 圆角 */
    background-color: #fafafa; /* 背景色 */
}
</style>
